<template>
    <transition name="slide-fade">
      <div class="content">
          <img src="../assets/imgs/indexBg1.jpg" alt="">
        <div class="formBox">
          <el-form ref="user" :rules="rules" :model="user">
            <el-form-item prop="players">
              <el-input placeholder="请输入玩家人数" type="number" @blur="yzPlayer()" v-model="user.players">
                <template slot="prepend">玩家人数</template>
              </el-input>
              <!--<el-form-item label="玩家人数">-->
              <!--<el-input-number v-model="user.players" @change="handleChange" :min="3" :max="10" label="描述文字">-->
              <!--<template slot="prepend">玩家人数</template>-->
              <!--</el-input-number>-->
              <!--</el-form-item>-->
            </el-form-item>
            <el-form-item prop="Undercover">
              <el-input placeholder="请输入卧底人数" type="number"  @blur="yzUndercover()" v-model="user.Undercover">
                <template class="success" slot="prepend">卧底人数</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input  placeholder="输入4位数房间密码" type="number" v-model="user.password">
                <template class="success" slot="prepend">房间密码</template>
              </el-input>
            </el-form-item>
            <el-form-item label="是否有白板">
              <el-switch v-model="checked" active-color="#67C23A" inactive-color="#666"></el-switch>
            </el-form-item>
          </el-form>

          <div class="create">
            <el-button class="el-button el-button--success" @click="toPage('gamehome')">
              进入房间
            </el-button>
          </div>

        </div>
      </div>
    </transition>
</template>
<script>

  export default {
    name: 'setting',

    data: () => ({
      checked:false,

      user:{
        players:'',
        Undercover:'',
        password:''
      },
      rules: {
        password: [
          {max:4, message: '最多4位数', trigger: 'change'}
        ],
        players:[{ required: true, validator: (rule, value, callback) => {
            if(!value){callback('人数不能为空')}
            if(value<0){callback('人数不能小于0')}
            if(value>15){callback('人数最多15人')}
          } , trigger: 'blur' }],
        Undercover:[{ required: true, validator: (rule, value, callback) => {
            if(!value){callback('卧底人数不能为空')}
            if(value<0){callback('卧底人数不能小于0')}
          } , trigger: 'blur' }]
      }

    }),
    methods: {
      toPage (page) {
        this.$axios.post(this.urlList.authUrl + '/api/game/create_room',{
          token:window.localStorage.getItem('token'),
          white:this.checked,
          number:this.user.players,
          pwd:this.user.password,
          spy_num:this.user.Undercover
        }).then((res)=>{
          if(res.data.error == 200){
            this.$router.push({name: page, params: { room_id: res.data.data.room_id,pwd: this.user.password}})
          }else{
            this.$message({
              message: '为了游戏体验，' + res.data.message,
              type: 'warning'
            });
          }
        })

      },
      yzPlayer(){
        if(0<this.user.players&&this.user.players<=5){
          this.user.Undercover = 1
        }else{
          this.user.Undercover = 2
        }
      },
      yzUndercover(){
        if(this.user.Undercover>this.user.players/2){
          this.$message('卧底人数不能超过一半')
          return false
        }
      }
    }
  }
</script>

<style>
  .content{
    height:100%;
    overflow: hidden;
    background-color:#22267c;
  }

  .content img{
    width: 100%;
    height: 100%;
  }
  .formBox{
    position: absolute;
    width: 80%;
    top: 20%;
    left: 50%;
    margin-left: -40%;
  }
  .create{
    width: 100%;
    margin-top: 40px;
    text-align: center;
  }
  .el-form-item__label{
    color: #fff;
  }
  .el-checkbox__label{
    color: #f1f1f1;
    text-shadow:0px 2px 2px #666;
  }
  .slide-fade{
    position: absolute;left:0;right: 0;
  }
  .slide-fade-enter-active {
    transition: all 0.8s ease;
  }
  .slide-fade-leave-active {

    transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  {
    left:0;right: 0;
    transform: translateY(-250px);
    opacity: 0;
  }
  .transition-box {
    margin: auto;
    margin-bottom: 10px;
    width: 200px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
  }
  .el-button--success{
    font-weight: bold;
  }
</style>
